<template>
    <div>
       <div>
           <input type="text" v-model="msg" 
           @keyup.enter="handleEnter(msg)"
           >
           <h1>已完成</h1>
           <div v-for="item of list" :key="item.msg">
               <input type="checkbox" :checked='item.doce' @click="handleClick(item.msg)" >
               {{item.msg}}
               <button @click="handleDetail(item.msg)">删除</button>
           </div>

           <h1>未完成</h1>
           <div v-for="item of done" :key="item.msg">
               <input type="checkbox" :checked='item.doce' @click="handleBount(item.msg)">
               {{item.msg}}
               <button @click="handleDeta(item.msg)">删除</button>
           </div>
       </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:"",
            list:[],
            done:[]
        };
    },
     mounted(){
        var list =localStorage.getItem('list')
        var done =localStorage.getItem('done')
        if(list){
            this.list =JSON.parse(list)
        }if(done){
            this.done =JSON.parse(done)
        }
    },
    methods: {
        handleEnter(msg){
            var list =this.list
            if(!list.includes(msg)){
                list.push({msg,doce:false})
                this.msg=""
                console.log(msg);
                localStorage.setItem('list',JSON.stringify(this.list))
            }else{
                alert("已经添加了")
                this.msg=""
            }
        },
        handleDetail(val){
           this.list =this.list.filter(item=>{
                return item.msg !==val
            })
             localStorage.setItem('list',JSON.stringify(this.list))
        },
        handleClick(val){
            this.list = this.list.filter(item=>{
                if(item.msg ==val){
                    item.doce = !item.doce
                    this.done.push(item)
                }
                return item.doce == false
            })
           localStorage.setItem('list',JSON.stringify(this.list))
            localStorage.setItem('done',JSON.stringify(this.done))
        },
        handleDeta(val){
            this.done=this.done.filter(item=>{
                return item.msg !==val
            })
             localStorage.setItem('list',JSON.stringify(this.done))
        },
        handleBount(val){
            this.done = this.done.filter(item=>{
                if(item.msg ==val){
                    item.doce = !item.doce
                    this.list.push(item)
                }
                return item.doce == true
            })
            localStorage.setItem('list',JSON.stringify(this.list))
            localStorage.setItem('done',JSON.stringify(this.done))
        }
    },
};
</script>

<style  scoped>

</style>